<template>
  <!-- 常用属性
      background-color：  菜单背景色
      text-color: 菜单文本颜色
      active-text-color:激活菜单时文字颜色
      default-active:默认激活菜单的index ,值对应el-menu-item标签中的index值，如果匹配就激活
      router:是否将index作为路由path
      collapse:折叠菜单（仅在垂直方向导航使用）
      collapse-transition  是否开启折叠动画
  -->
  <el-container class="main">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <el-menu
        style="height: 100%"
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        :collapse="isCollapse"
        :collapse-transition="false"
      >
        <el-menu-item index="/index">
          <i class="el-icon-s-home"></i>
          <span slot="title">系统首页</span>
        </el-menu-item>
        <el-menu-item index="/index/kb-list">
          <i class="el-icon-s-order"></i>
          <span slot="title">问题列表</span>
        </el-menu-item>
        <el-menu-item index="/index/kb-add">
          <i class="el-icon-folder-add"></i>
          <span slot="title">添加问题</span>
        </el-menu-item>
        <el-menu-item index="/index/kb-query">
          <i class="el-icon-search"></i>
          <span slot="title">查询问题</span>
        </el-menu-item>
        <!-- 产品文档 -->
        <el-submenu index="/index">
          <!-- 一级标题 -->
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            <span>产品文档</span>
          </template>
          <el-menu-item index="/index/art-list">文档列表</el-menu-item>
          <el-menu-item index="/index/art-add">文档添加</el-menu-item>
        </el-submenu>
        <!-- 地图 -->
        <el-submenu index="/">
          <!-- 一级标题 -->
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>地理地图</span>
          </template>
          <el-menu-item index="/index/map-txMap">腾讯地图</el-menu-item>
        </el-submenu>
        <el-menu-item index="/index/admin-info">
          <i class="el-icon-setting"></i>
          <span slot="title">用户设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="height: 95px; line-height: 95px">
        <div class="header-box">
          <!-- 头部左侧是字体图标 ，可以通过设置字体的方式放大缩小 -->
          <div class="header-left">
            <i
              :class="{
                'el-icon-s-fold': !isCollapse,
                'el-icon-s-unfold': isCollapse,
              }"
              class="collape-icon"
              @click="isCollapse = !isCollapse"
            ></i>
          </div>
          <div class="header-title">企鹅产品售后服务信息管理系统</div>
          <!-- 下拉框组件
             trigger:触发方式，默认鼠标悬停，click点击触发
             hide-on-click:	是否在点击菜单项后隐藏菜单
              size:按钮有效果
          -->
          <div class="header-right">
            <el-dropdown
              :hide-on-click="false"
              trigger="click"
              size="small"
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                欢迎您：{{ currentUser
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userinfo">用户信息</el-dropdown-item>
                <el-dropdown-item command="updatepwd"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="logout">用户退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <!-- 路由容器 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 折叠控制标记
      isCollapse: false,
      //存放当前用户名
      currentUser: "",
    };
  },
  methods: {
    handleCommand(command) {
      this.$message({
        message: "点击了:" + command,
      });
      //根据command的值，做相应的操作
      if (command == "userinfo") {
        alert("执行用户信息展示...");
      } else if (command == "updatepwd") {
        // alert("进入用户修改界面");
        //进入修改密码界面
        this.$router.push("/index/admin-modifypwd");
      } else if (command == "logout") {
        //做退出操作
        this.logout();
      }
    },
    //用户退出
    logout() {
      this.$confirm("确定退出吗?毫无留恋了?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //1.currentUser变量清空，2.token清除，3.logname清除
          this.currentUser = "";
          localStorage.removeItem("token");
          localStorage.removeItem("logname");
          window.location.reload();
          //点了确定之后
          this.$message({
            type: "success",
            message: "您已退出!",
          });
        })
        .catch(() => {
          //取消退出
          this.$message({
            type: "info",
            message: "已取消退出，您做了明智的选择!",
          });
        });
    },
    //获取当前登录用户名
    getCurrentUser() {
      this.currentUser = localStorage.getItem("logname");
    },
  },
  //页面创建完成，还没有渲染数据
  created: function () {
    //将本地存储logname放入到currentUser变量保存
    this.getCurrentUser();
  },
  mounted: function () {},
};
</script>

<style lang="scss" >
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0;
  min-width: 200px;
}

.el-dropdown-link {
  cursor: pointer;
  color: rgb(97, 87, 87);
}
.el-icon-arrow-down {
  font-size: 12px;
}
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  //左边的icon
  .collape-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    color: #333;
    cursor: pointer;
  }
  // 大标题
  .header-title {
    // border: 1px solid red;
    flex: 1;
    text-align: left;
    font-size: 40px;
    font-weight: bold;
    margin-left: 20px;
  }
}

.main {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .header {
    font-size: 40px;
    font-weight: bold;
  }
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>